<template>
  <el-table
    :data="planningStore.timeSlots"
    stripe
    style="width: 100%"
    empty-text="暂无时间槽数据"
    height="calc(100vh - 270px)"
  >
    <el-table-column type="index" label="序号" width="80" align="center" />
    <el-table-column prop="from" label="开始时间" width="120" sortable="custom">
      <template #default="scope">
        <div class="time-cell">
          <!-- <el-icon><i-ep-clock /></el-icon> -->
          <span>{{ dayjs(scope.row.from).format("MM/DD HH:mm") }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="to" label="结束时间" width="120" sortable="custom">
      <template #default="scope">
        <div class="time-cell">
          <!-- <el-icon><i-ep-clock /></el-icon> -->
          <span>{{ dayjs(scope.row.to).format("MM/DD HH:mm") }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="duration"
      label="时长"
      width="80"
      align="center"
      sortable
    />
    <el-table-column min-width="200">
      <template #header>
        <div class="table-column-header">
          <span>席位设置</span>
          <span>
            <!-- 席位过滤 -->
            <el-select
              v-model="planningStore.selectedOrgId"
              size="small"
              style="width: 120px"
            >
              <el-option
                v-for="item in optionProfile.organizations"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <!-- 同步勾选设置 -->
            <el-tooltip
              placement="top"
              content="勾选相应席位后，会同步修改后续所有时段的席位设置"
            >
              <el-checkbox
                v-model="planningStore.isSeatSlotsCopyFollowings"
                size="small"
                label="同步勾选"
              />
            </el-tooltip>
          </span>
        </div>
      </template>
      <template #default="scope">
        <div>
          <!-- <el-button @click="handleChangeSeat(scope.$index)">
            修改席位
          </el-button> -->
          <el-checkbox-group
            v-model="scope.row.seats"
            size="small"
            @change="copySeatValue(scope.$index)"
          >
            <el-checkbox
              v-for="item in seatProfileFiltered"
              :label="item.name"
              :value="item.name"
              style="width: 40px"
            />
          </el-checkbox-group>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import usePlanningStore from "@/stores/planningStore";
import seatProfile from "@/profiles/seats.json";
import optionProfile from "@/profiles/options.json";
import dayjs from "dayjs";

const planningStore = usePlanningStore();

// 过滤席位
const seatProfileFiltered = computed(() =>
  seatProfile.filter((item) =>
    item.organizationsIds.includes(planningStore.selectedOrgId)
  )
);

const copySeatValue = (i) => {
  if (planningStore.isSeatSlotsCopyFollowings) {
    for (let j = i + 1; j < planningStore.timeSlots.length; j++) {
      planningStore.timeSlots[j].seats = JSON.parse(
        JSON.stringify(planningStore.timeSlots[i].seats)
      );
    }
  }
};
</script>

<style scoped>
.table-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.table-column-header > span {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}
</style>
